<style>
    .input-width {
        width: 150px;
    }
</style>
<div id="app">
    <div class="col-md-12 col-lg-12 col-sm-12">
        <div class="form-inline">
            <div class="form-group">
                <label>产品名称</label>
                <input type="text" class="form-control input-width" style="width:150px" v-model="product_name"/>
            </div>
            <div class="form-group">
                <label>产品单价(￥)</label>
                <input type="number" class="form-control input-width" style="width:150px" v-model="price_rmb"/>
            </div>
            <div class="form-group">
                <label>数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="number" class="form-control input-width" style="width:150px" v-model="number"/>
            </div>
            <div class="form-group">
                <label>额外费用</label>
                <input type="number" class="form-control input-width" style="width:150px" value=0.00
                       v-model="extra_fee"/>
            </div>
        </div>
        <br/>
        <div class="form-inline">
            <div class="form-group">
                <label>Name&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" class="form-control input-width" style="width:150px" v-model="product_name_en"/>
            </div>
            <div class="form-group">
                <label>Price($)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="number" class="form-control input-width" style="width:150px" v-model="price_dollar"/>
            </div>
            <div class="form-group">
                <label>Extra Fee&nbsp;&nbsp;</label>
                <input type="number" class="form-control input-width" style="width:150px" v-model="customer_extra_fee"/>
            </div>
        </div>
    </div>
    <button class="btn btn-success" @click="add()">添加</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            product_name: "",
            price_rmb: 0.00,
            number: 1,
            customer_extra_fee: 0.00,
            product_name_en: '',
            price_dollar: 0.00,
            extra_fee: 0.00
        },
        methods: {
            add: function () {
                if (!this.product_name) {
                    layer.alert("产品名称未填");
                    return false;
                }
                var data = {};
                data.invoice = "<?php echo yii::$app->request->get('invoice');?>";
                data.product_name = this.product_name;
                data.price_rmb = this.price_rmb;
                data.number = this.number;
                data.customer_extra_fee = this.customer_extra_fee;
                data.price_dollar = this.price_dollar;
                data.product_name_en = this.product_name_en;
                data.extra_fee = this.extra_fee;
                $.post("/purchase/add_product", data, function (res) {
                    if (res.code == 1) {
                        layer.confirm(res.msg, {}, function () {
                            window.location.reload();
                        })
                    } else {
                        layer.alert(res.msg);
                    }
                }, 'json')
            },
            check_require: function (arr) {

            }
        }
    })
</script>